<template>
  <!-- 商品详情页主容器 -->
  <div class="app-container">
    <!-- 快捷导航组件 -->
    <ShortCut></ShortCut>
    <!-- 头部导航组件 -->
    <HeaderNav @type-selected="updateGoodsList"></HeaderNav>

    <!-- 商品详情内容区域 -->
    <div
      class="goodsdetail" style="width: 100%;max-width: 1200px;margin: 0 auto;padding: 20px;background-color: white;border-radius: 8px;box-sizing: border-box;">
      <div class="show">
        <div class="goods-info">
          <!-- 商品图片区域，支持放大功能 -->
          <div class="goods-image">
            <div class="image-wrapper" @mousemove="handleMouseMove" @mouseleave="stopZoom">
              <img :src="goods.imgSrc" :alt="goods.name" class="zoomable-image" :style="zoomStyle" @mouseenter="startZoom"/>
            </div>
            <!-- 商品编码信息 -->
            <div class="info" style="font-size: 11px; color: #999; padding: 10px 0px">
              <strong>商品编码：</strong>{{ goods.id }}
            </div>
            <hr />
            <!-- 服务信息 -->
            <div class="service">
              <img src="../assets/images/goods1.png" />
            </div>
          </div>

          <!-- 商品基本信息区域 -->
          <div class="goods-basic">
            <div class="goods-title">
              <div>{{ store.storeName }}</div>
              <div class="goods-wpzy">唯品自营</div>
              &nbsp;&nbsp;{{ goods.name }}
            </div>
            <div class="goods-intro">
              <!-- 配送地址选择 -->
              配送至
              <select v-model="selectedAddress" class="address-select">
                <option v-for="address in addressList" :key="address.id" :value="address.address">
                  {{ address.address }}
                </option>
              </select>
              <br />
              <p>现在付款，最快1月3日发货，1月5日送达</p>
              <br />
              <p>运费&nbsp;&nbsp;&nbsp;&nbsp;新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）</p>
              <br />

              <!-- 颜色选择 -->
              <p>颜色</p>
              <div class="color-options">
                <button v-for="color in availableColors" :key="color" class="option-btn"  :class="{ selected: selectedColor === color }" @click="selectColor(color)">
                  {{ color }}
                </button>
              </div>
              <br />

              <!-- 尺码选择 -->
              <p>尺码</p>
              <div class="size-options">
                <button v-for="size in availableSizes" :key="size" class="option-btn" :class="{ selected: selectedSize === size }" @click="selectSize(size)">
                  {{ size }}
                </button>
              </div>
            </div>

            <!-- 数量选择器 -->
            <div class="select">
              <span class="label">购买数量：</span>
              <div class="controls">
                <button class="numbtn" @click="decreaseQuantity">-</button>
                <span>{{ quantity }}</span>
                <button class="numbtn" @click="increaseQuantity">+</button>
              </div>
            </div>

            <!-- 购物车按钮 -->
            <div class="cart">
              <button class="price-tag">¥ {{ goods.price }}</button>
              <button class="addcart" @click="addToCart">
                ¥ {{ goods.DiscountPrice }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <!-- 详情 -->
    <div class="container">
      <div class="description">
        <!-- 店铺信息 -->
        <div class="store">
          <div class="store-content">
            <img :src="store.logo" alt="店铺logo" />
            <div class="store-name">
              {{ store.storeName }}
              <div class="store-description">{{ store.description }}</div>
            </div>
          </div>
          <button class="storeall">查看品牌</button>
        </div>

        <!-- 店铺其他商品 -->
        <div class="storeallgoods">
          <h2>店铺其他商品</h2>
          <div class="goods-list">
            <div v-for="good in storeGoods" :key="good.id" class="goods-item">
              <img :src="good.imgSrc" :alt="good.name" class="goods-image" />
              <p class="goods-price">
                {{ good.name }}<br />
                <!-- ¥ {{ good.price }} -->
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧导航 -->
      <div class="right-nav">
        <div class="ulli">
          <ul>
            <li data-section="specifications">规格参数</li>
            <li data-section="display">商品展示</li>
            <li data-section="reviews">全部评价</li>
            <li data-section="inquiry">商品咨询</li>
            <li data-section="about">关于我们</li>
          </ul>
        </div>

        <!-- 规格参数部分 -->
        <div id="specifications" class="section">
          <h1 class="section-title"><span>♦</span> 商品尺码 SIZE</h1>
          <div class="hint">
            <i>ⓘ</i>
            <span>温馨提示</span>
          </div>
          <p>尺码对照表：</p>
          <table class="size-table">
            <thead>
              <tr>
                <th>尺码</th>
                <th>号型</th>
                <th>腰围(cm)</th>
                <th>臀围(cm)</th>
                <th>裤长(cm)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>S</td>
                <td>155/60A</td>
                <td>67</td>
                <td>108</td>
                <td>100</td>
              </tr>
              <tr>
                <td>M</td>
                <td>160/64A</td>
                <td>70</td>
                <td>112</td>
                <td>101</td>
              </tr>
              <tr>
                <td>L</td>
                <td>165/68A</td>
                <td>73</td>
                <td>116</td>
                <td>102</td>
              </tr>
              <tr>
                <td>XL</td>
                <td>170/72A</td>
                <td>76</td>
                <td>120</td>
                <td>103</td>
              </tr>
            </tbody>
          </table>
          <p class="note">
            温馨提示：尺码为手工测量，因每个人的测量方式不同，会有1-3CM误差，请挑选合适的尺码购买。
          </p>
        </div>

        <!-- 商品展示部分 -->
        <div id="display" class="section">
          <h2>商品展示</h2>
          <p>{{ goods.description }}...</p>
        </div>

        <!-- 商品评价部分 -->
        <div id="reviews" class="section">
          <div class="comment">
            <h2>全部评价</h2>
          </div>
          
          <div class="reviews-container">
            <div v-for="review in reviews" :key="review.id" class="review-container">
              <div class="user-info">
                <span class="user-name">{{ review.username }}</span>
                <span class="user-membership">白金会员</span>
              </div>
              <div class="review-details">
                颜色：{{ review.color }} 尺码：{{ review.size }}
              </div>
              <div class="review-content">{{ review.content }}</div>
            </div>
          </div>
        </div>

        <!-- 商品咨询部分 -->
        <div id="inquiry" class="section">
          <h2>商品咨询</h2>
          <p>这里是商品咨询的内容...</p>
        </div>

        <!-- 关于我们部分 -->
        <div id="about" class="section">
          <h2>关于我们</h2>
          <br><br>
          <p>尺码会不会偏大或偏小？
<br>
商品尺码表是平铺测量尺寸仅供参考，误差范围1-3CM为正常值。
<br><br>
尺码表上的尺码标准吗？
<br>
商品尺码表是平铺测量尺寸仅供参考，误差范围1-2CM为正常值。
<br>
衣服会掉毛或者起球吗？
<br>
产品从布料采购、设计、生产、质检都经过严格的把关，整体质感和效果也是经过专业设计，请放心购买
<br><br>
图片颜色和实物颜色是否相同？
<br>
商品均采用专业拍摄，力求将最真实的视线信息。最终颜色以实物为准
<br><br>
商品收到有异味是为什么？
<br>
您好，由于商品制作完成后进行包装，衣服放在仓库中，在相对密封的环境下会有稍许异味。这是正常现象，不影响穿着。
<br><br>
订单什么时候可以收到货？
<br>
正常情况下发货后2-3天到货，偏远地区3-9天到货
<br><br>
价格说明
<br>
1、特卖价：指商品销售价, 是您决定是否购买商品的依据。特卖价可能会根据商品参与特定的活动优惠（补贴、满减、优惠券等）而发生变化，此时唯品会将在页面同时为您标示出商品参与活动优惠后的特卖价。试用商品的特卖价标识为试用价。
<br>
2、超V特卖价：超级VIP会员享受专属优惠（折扣、补贴等）后的商品价格，包含超V试用价。
<br>
3、划线价：唯品会展示的划横线价格并非原价，该价格为品牌零售参考价，采集自商品的吊牌、标签、包装、品牌官网或厂商提供的建议零售价等。由于地区、时间的差异性以及市场行情波动，品牌零售参考价可能与您购物时展示的不一致，仅供您参考。
<br>
4、折扣：唯品会展示的折扣比为特卖价/超V特卖价与划线价的对比（该值四舍五入后采小数点后1位，如以特卖价为例：￥799/￥2899=0.2756=2.8折） 该对比值仅供您参考，不作为结算基数。
<br>
5、超V首单价：活动期首次付费超级VIP后，特定商品享受专属优惠后的价格。
<br>
6、超V 补贴价：超级VIP 会员享受精选特定商品（如"超V心选"商品）专属补贴后的商品价格。
<br>
7、新人价：首次在唯品会平台下单购买的用户享受新人优惠（新人券、新人补贴等）后的价格。
<br>
8、618狂欢价：指618年中特卖节期间的商品销售价，是您决定是否购买商品的依据。"618狂欢价"可能会根据商品参与特定的活动优惠 (补贴满减、优惠券等) 而发生变化，此时唯品会将在页面同时为您标示出商品参与活动优惠后的"618狂欢价"。
<br>
9、618超V价：指618年中特卖节活动期间超级VIP会员享受专属优惠 (折扣、补贴等)后的商品价格。
<br>
10、618 新人价：指618年中特卖节活动期间首次在唯品会平台下单购买的用户享受新人优惠（新人券、新人补贴等）后的价格。
<br>
销量说明：指在唯品会平台内，近1年（365天）销售该款商品的总数量。其他如浏览、收藏、加购、回购等数据统计维度与前述保持一致。...</p>
        </div>
      </div>
    </div>
    <!-- 页脚组件 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
// 导入组件和依赖
import HeaderNav from "@/components/common/HeaderNav.vue";
import Footer from "@/components/common/Footer.vue";
import ShortCut from "@/components/common/ShortCut.vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { ref, onMounted, computed, watch } from "vue";

// 获取路由信息
const route = useRoute();

// 定义响应式数据
const goods = ref({}); // 当前显示的商品信息
const store = ref({}); // 当前商品的店铺信息
const allVariants = ref([]); // 所有商品变体（不同颜色尺码）
const quantity = ref(1); // 购买数量
const selectedColor = ref(""); // 选中的颜色
const selectedSize = ref(""); // 选中的尺码
const selectedAddress = ref(""); // 选中的配送地址
const addressList = ref([]); // 地址列表
const storeGoods = ref([]); // 店铺的其他商品

// 图片放大功能相关变量
const isZooming = ref(false); // 是否正在放大
const zoomStyle = ref({}); // 放大样式
const zoomFactor = 2; // 放大倍数

/**
 * 开始图片放大
 */
const startZoom = () => {
  isZooming.value = true;
  zoomStyle.value = {
    transform: `scale(${zoomFactor})`,
    transition: "transform 0.1s ease",
  };
};

/**
 * 停止图片放大
 */
const stopZoom = () => {
  isZooming.value = false;
  zoomStyle.value = {
    transform: "scale(1)",
    transition: "transform 0.1s ease",
  };
};

/**
 * 处理鼠标移动事件，实现跟随放大效果
 */
const handleMouseMove = (e) => {
  if (!isZooming.value) return;

  const container = e.currentTarget;
  const rect = container.getBoundingClientRect();

  // 计算鼠标在图片上的相对位置
  const x = (e.clientX - rect.left) / rect.width;
  const y = (e.clientY - rect.top) / rect.height;

  // 更新放大样式
  zoomStyle.value = {
    transform: `scale(${zoomFactor})`,
    transformOrigin: `${x * 100}% ${y * 100}%`,
    transition: "transform 0.1s ease",
  };
};

// 计算属性：获取所有可用的颜色选项
const availableColors = computed(() => {
  const colors = new Set();
  allVariants.value.forEach((item) => colors.add(item.color));
  return Array.from(colors);
});

// 计算属性：获取所有可用的尺码选项
const availableSizes = computed(() => {
  const sizes = new Set();
  allVariants.value.forEach((item) => sizes.add(item.size));
  return Array.from(sizes);
});

/**
 * 获取地址数据
 */
const fetchAddressData = async () => {
  try {
    const userId = sessionStorage.getItem("userId");
    if (!userId) {
      console.error("未找到用户ID");
      return;
    }

    const response = await axios.get(
      `http://127.0.0.1:3000/api/address/getAddress?userId=${userId}`
    );

    if (response.data.status === 0) {
      addressList.value = response.data.data;
      // 设置默认选中的地址（第一个地址或默认地址）
      const defaultAddress =
        response.data.data.find((addr) => addr.is_default === 1) ||
        response.data.data[0];
      if (defaultAddress) {
        selectedAddress.value = defaultAddress.address;
      }
    } else {
      console.error("获取地址失败:", response.data.message);
    }
  } catch (error) {
    console.error("获取地址数据失败:", error);
  }
};

/**
 * 获取商品详情数据和店铺信息
 */
const fetchGoodsDetail = async () => {
  try {
    // 请求API获取所有商品数据
    const goodsResponse = await axios.get(
      "http://127.0.0.1:3000/api/goods/getAllGoods"
    );
    const goodsId = parseInt(route.query.goodsid);

    // 过滤出当前商品的所有变体（不同颜色尺码）
    allVariants.value = goodsResponse.data.data.filter(
      (item) => item.id === goodsId
    );

    if (allVariants.value.length > 0) {
      // 设置第一个变体为默认显示
      goods.value = allVariants.value[0];
      // 设置默认选中的颜色和尺码
      selectedColor.value = goods.value.color;
      selectedSize.value = goods.value.size;

      // 获取店铺信息
      const storeResponse = await axios.get(
        "http://127.0.0.1:3000/api/store/getAllStore"
      );
      if (storeResponse.data.status === 0) {
        const storeData = storeResponse.data.data.find(
          (store) => store.id === goods.value.storeId
        );
        if (storeData) {
          store.value = storeData;
        }
      }
    } else {
      console.error("未找到对应商品");
    }
  } catch (error) {
    console.error("获取商品详情失败:", error);
  }
};

/**
 * 获取店铺的其他商品
 */
const fetchStoreGoods = async () => {
  try {
    const response = await axios.get(
      "http://127.0.0.1:3000/api/goods/getAllGoods"
    );
    const allGoods = response.data.data;

    if (allGoods.length > 0 && store.value.id) {
      const uniqueGoods = new Set(); // 用于跟踪唯一的商品ID
      const filteredGoods = []; // 存储过滤后的唯一商品

      // 过滤出当前店铺的其他商品，排除当前商品，并确保ID唯一
      for (const good of allGoods) {
        if (
          good.storeId === store.value.id &&
          good.id !== goods.value.id &&
          !uniqueGoods.has(good.id)
        ) {
          uniqueGoods.add(good.id); // 将商品ID添加到Set中
          filteredGoods.push(good); // 将商品添加到结果数组中
        }
      }

      // 最多显示4个商品
      storeGoods.value = filteredGoods.slice(0, 4);
    }
  } catch (error) {
    console.error("获取店铺商品失败:", error);
  }
};

/**
 * 选择颜色
 */
const selectColor = (color) => {
  selectedColor.value = color;
  updateDisplayedVariant();
};

/**
 * 选择尺码
 */
const selectSize = (size) => {
  selectedSize.value = size;
  updateDisplayedVariant();
};

/**
 * 更新显示的商品变体（根据选中的颜色和尺码）
 */
const updateDisplayedVariant = () => {
  const variant = allVariants.value.find(
    (item) =>
      item.color === selectedColor.value && item.size === selectedSize.value
  );

  if (variant) {
    goods.value = variant;
  }
};

/**
 * 增加购买数量
 */
const increaseQuantity = () => {
  quantity.value++;
};

/**
 * 减少购买数量（最少为1）
 */
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

/**
 * 添加到购物车
 */
const addToCart = async () => {
  // 检查用户是否登录
  const userName = sessionStorage.getItem("userName");
  if (!userName) {
    alert("请登录后才能添加到购物车");
    return;
  }

  try {
    // 准备要添加的购物车商品数据
    const cartItem = {
      id: goods.value.id,
      name: goods.value.name,
      description: goods.value.description,
      category: goods.value.category,
      imgSrc: goods.value.imgSrc,
      price: goods.value.DiscountPrice || goods.value.price, // 使用折扣价或原价
      DiscountPrice: goods.value.DiscountPrice,
      storeId: goods.value.storeId,
      state: goods.value.state,
      size: selectedSize.value,
      color: selectedColor.value,
      address: selectedAddress.value,
      num: quantity.value, // 注意这里使用 num 而不是 quantity
      isChecked: false,
    };

    // 获取用户购物车数据
    const cartResponse = await axios.get(`http://localhost:3001/cartList`);
    let userCart = cartResponse.data.find((cart) => cart.userName === userName);

    if (userCart) {
      // 检查购物车中是否已有相同商品变体
      const existingItemIndex = userCart.goodsList.findIndex(
        (item) =>
          item.id === cartItem.id &&
          item.color === cartItem.color &&
          item.size === cartItem.size
      );

      if (existingItemIndex !== -1) {
        // 如果已存在，更新数量
        userCart.goodsList[existingItemIndex].num += cartItem.num;
      } else {
        // 如果不存在，添加新商品
        userCart.goodsList.push(cartItem);
      }

      // 更新购物车
      await axios.put(
        `http://localhost:3001/cartList/${userCart.id}`,
        userCart
      );
    } else {
      // 用户没有购物车，创建新购物车
      userCart = {
        id: Math.random().toString(36).substr(2, 4), // 生成随机ID
        userName,
        goodsList: [cartItem],
      };
      await axios.post("http://localhost:3001/cartList", userCart);
    }

    alert("成功添加到购物车");
  } catch (error) {
    console.error("添加到购物车失败:", error);
    alert("添加失败，请稍后重试");
  }
};

// 初始化右侧导航点击事件和滚动行为
document.addEventListener("DOMContentLoaded", function () {
  const navItems = document.querySelectorAll(".ulli li");
  const sections = document.querySelectorAll(".section");

  // 导航项点击事件
  navItems.forEach((item) => {
    item.addEventListener("click", function () {
      // 移除所有激活状态
      navItems.forEach((li) => li.classList.remove("active"));
      // 添加当前激活状态
      this.classList.add("active");
      // 滚动到对应的section
      const sectionId = this.getAttribute("data-section");
      const section = document.getElementById(sectionId);
      section.scrollIntoView({ behavior: "smooth" });
    });
  });

  // 初始化时设置第一个为激活状态
  if (navItems.length > 0) {
    navItems[0].classList.add("active");
  }
});

// 使用watch来监听store和goods的变化，以获取店铺的其他商品
watch(
  [() => store.value.id, () => goods.value.id],
  () => {
    if (store.value.id && goods.value.id) {
      fetchStoreGoods();
    }
  },
  { immediate: true }
);

// 定义评价数据
const reviews = ref([]);
 
/**
 * 获取商品评价数据
 */
const fetchReviews = async () => {
  try {
    const goodsId = parseInt(route.query.goodsid);
    const response = await axios.get(
      `http://127.0.0.1:3000/api/comment/getAllComm?goodsId=${goodsId}`
    );
    if (response.data.status === 0) {
      reviews.value = response.data.data;
    } else {
      console.error("获取评价失败:", response.data.message);
    }
  } catch (error) {
    console.error("获取评价数据失败:", error);
  }
};

// 初始化滚动监听
onMounted(() => {
  // 添加滚动行为监听
  const handleScroll = () => {
    const navItems = document.querySelectorAll('.ulli li');
    const sections = document.querySelectorAll('.section');
    
    let current = '';
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      if (pageYOffset >= (sectionTop - 100)) {
        current = section.getAttribute('id');
      }
    });
    
    navItems.forEach(li => {
      li.classList.remove('active');
      if (li.getAttribute('data-section') === current) {
        li.classList.add('active');
      }
    });
  };
  
  window.addEventListener('scroll', handleScroll);
  
  // 初始化导航点击事件
  const navItems = document.querySelectorAll('.ulli li');
  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认行为
      
      // 移除所有激活状态
      navItems.forEach(li => li.classList.remove('active'));
      // 添加当前激活状态
      this.classList.add('active');
      
      // 滚动到对应的section
      const sectionId = this.getAttribute('data-section');
      const section = document.getElementById(sectionId);
      if (section) {
        section.scrollIntoView({ 
          behavior: 'smooth',
          block: 'start' 
        });
      }
    });
  });
 
});

// 在组件挂载时获取数据
onMounted(() => {
  fetchGoodsDetail();
  fetchAddressData();
  fetchReviews(); // 获取评价数据
});
</script>

<style>
.comment {
  background-color: #eae8eb;
  line-height: 45px;
  padding-left: 15px;
}

.reviews-container {
  /* 灰色背景 */
  border-radius: 5px;
  width: 100%;
  /* 宽度自适应 */
  box-sizing: border-box;
  /* 确保padding不影响总体宽度 */
}

.review-container {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-name {
  font-weight: bold;
}

.user-membership {
  color: #666;
  font-size: 12px;
  margin-left: 5px;
}

.review-details {
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.review-content {
  margin-bottom: 10px;
}

.storeallgoods {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #eee;
  width: 180px;
}

.storeallgoods h2 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.goods-item {
  width: 156px;
  text-align: center;
}

.goods-image {
  width: 156px;
  height: 197px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.goods-price {
  margin-top: 10px;
  font-size: 14px;
  color: #ff007f;
}

.section-title {
  font-size: 18px;
  color: #ff69b4;
  /* 粉色标题 */
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.size-table th,
.size-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.size-table th {
  background-color: #f2f2f2;
}

.note {
  color: #666;
  font-size: 14px;
}

.hint {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.hint i {
  margin-right: 5px;
  color: #1e90ff;
  /* 蓝色提示图标 */
}

.container {
  display: flex;
}

.description {
  margin-left: 300px;
  /* 右偏300px */
  width: 180px;
  height: 120px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.store {
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.store-content {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  max-width: 100%;
}

.store img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-right: 5px;
  border: 1px solid #ddd;
}

.store-name {
  font-weight: bold;
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-description {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-width: 100%;
}

.right-nav {
  margin-left: 50px;
  /* 右偏600px */
  width: 1000px;
  /* 宽度1000px */
}

.ulli {
  border-bottom: 3px solid #ccc;
  /* ulli有边框，下边框3px */
}

.ulli ul {
  list-style: none;
  padding: 0;
  display: flex;
  /* li是一排的 */
  margin: 0;
}

.ulli li {
  margin-right: 20px;
  /* li之间的间距 */
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.ulli li:hover {
  background-color: #f0f0f0;
}

.ulli li.active {
  color: #ff007f;
  /* 玫红色 */
  font-weight: bold;
}

.section {
  margin-top: 20px;

  border: 1px solid #eee;
  min-height: 200px;
}

.description {
  margin-left: 300px;
  /* 右偏300px */
}

.store {
  border: 1px solid #ccc;
  /* 边框样式 */
  width: 180px;
  /* 宽度180px */
  height: 120px;
  /* 高度132px */
  padding: 10px;
  /* 添加内边距 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 左对齐 */
  box-sizing: border-box;
  /* 确保边框和内边距不影响总体尺寸 */
}

.store-content {
  display: flex;
  align-items: center;
  /* 名称和图片齐平 */
  margin-bottom: 8px;
  /* 内容之间的间距 */
  max-width: 100%;
  /* 确保内容不超出父容器 */
}

.store img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  /* 确保图片保持比例 */
  margin-right: 5px;
  /* 图片右边距 */
  border: 1px solid #ddd;
  /* 图片边框 */
}

.store-name {
  font-weight: bold;
  /* 名称加粗 */
  margin: 0;
  /* 移除默认边距 */
  font-size: 13px;
  white-space: nowrap;
  /* 防止名称换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}

.store-description {
  margin-top: 4px;
  /* 描述与图片之间的间距 */
  font-size: 12px;
  /* 调整描述字体大小 */
  line-height: 1.4;
  /* 调整行高 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 限制为两行 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  max-width: 100%;
  /* 确保描述不超出父容器 */
}

.storeall {
  width: 158px;
  background: #fcedf2;
  border: 1px solid #ffbee0;
  border-radius: 3px;
  text-align: center;
  display: block;
  height: 30px;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #e00078;
  line-height: 30px;
}
</style>

<style lang="scss" scoped>
.color-options,
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.option-btn {
  padding: 5px 15px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.option-btn.selected {
  border-color: #ff4466;
  color: #ff4466;
  font-weight: bold;
}

.numbtn {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.price-tag {
  background: #f5f5f5;
  color: #ff4466;
  padding: 10px 20px;
  border: none;
  font-weight: bold;
}

.addcart {
  background: #ff4466;
  color: white;
  padding: 10px 40px;
  border: none;
  margin-left: 10px;
  cursor: pointer;
}

/* 添加放大相关样式 */
.image-wrapper {
  height: 420px;
  width: 420px;
  height: auto;
  overflow: hidden;
  position: relative;
}

.zoomable-image {
  height: 420px;
  width: 420px;
  display: block;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.zoomable-image:hover {
  transform: scale(1.05);
  /* 轻微悬停效果 */
}

.goodsdetail {
  height: 100%;
  background-color: #f5f5f5;

  .main {
    width: 80%;
    height: 200px;
    background-color: rgb(107, 221, 183);
    margin: 0px auto;
  }

  .show {
    width: 100%;
    margin: 10px auto;
    padding: 20px 20px 20px 80px;
    background-color: white;
    border-radius: 8px;

    .goods-info {
      display: flex;
      gap: 30px;

      .goods-image {
        flex: 0 0 420px;
        /* 固定宽度为420px */
        border-radius: 4px;
        background-color: #ffffff;
      }

      .service {
        float: left;
      }

      .service li {
        float: left;
        width: 101px;
        height: 100px;
      }

      .service li a {
        font-size: 15px;
        color: #999;
        line-height: 100px;
        font-weight: 500;
      }

      .service li span {
        width: 25px;
        height: 25px;
        display: inline-block;
        position: relative;
        left: 2px;
        top: 5px;
      }

      .service li span img {
        width: 24px;
        height: 24px;
      }

      .goods-basic {
        flex: 1;
        padding: 20px;

        .goods-title {
          margin-left: 15px;
          font-size: 20px;
          margin-bottom: 15px;
          color: #333;
          text-align: left;
        }

        .goods-wpzy {
          background-color: red;
          /* 红底 */
          color: white;
          /* 白字 */
          border-radius: 4px;
          /* 圆角，可以根据需要调整半径大小 */
          padding: 2px 2px;
          /* 内边距，可以根据需要调整 */
          display: inline-block;
          /* 使div可以根据内容调整宽度 */
          font-size: 15px;
          /* 字体大小，可以根据需要调整 */
          text-align: center;
          /* 文字居中 */
        }

        .goods-intro {
          font-size: 12px;
          color: #999;
        }

        .goods-id {
          margin-left: 15px;
          color: #666;
          font-size: 20px;
          margin-bottom: 20px;
          text-align: left;
        }

        .select {
          margin: 20px 0;
          display: flex;
          align-items: center;

          .label {
            color: #666;
            margin-right: 10px;
          }

          .controls {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;

            .numbtn {
              width: 36px;
              height: 36px;
              border: none;
              background: #f5f5f5;
              color: #666;
              cursor: pointer;
              font-size: 18px;
            }
          }
        }

        .cart {
          margin-top: 30px;
          display: flex;
          gap: 15px;

          button {
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;

            &.addcart {
              background-color: red;
              color: white;
              border: none;
              border-radius: 4px;
              padding: 12px 30px;
              font-size: 16px;
              cursor: pointer;
              display: flex;
              align-items: center;
              gap: 5px;
              position: relative;
            }
          }
        }
      }
    }
  }

  .price-tag {
    background-color: pink;
    color: white;
    border: none;
    text-decoration: line-through;
    margin-right: 5px;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
  }

  .bottom {
    width: 80%;
    height: 200px;
    background-color: white;
    margin: 0px auto;
    text-align: left;
  }
}
</style>